<template>
  <div class="logo">
    <span>每</span>
    <span>日</span>
    <span>一</span>
    <span>笑</span>
  </div>
</template>

<script setup>

</script>

<style scoped>
.logo {
  position: relative;
  font-size: 2rem;
  font-weight: bold;
  color: #ff6b6b;
  text-shadow: 3px 3px 0px #ffb8b8;
  animation: bounce 2s infinite;
}

.logo span {
  margin: 0 2px;
}

.logo span:nth-child(1) {
  color: #a5d8a5;
  display: inline-block;
  animation: swing 3s ease-in-out infinite;
}

.logo span:nth-child(2) {
  color: #88c9f2;
  display: inline-block;
  animation: swing 3s ease-in-out infinite 0.3s;
}

.logo span:nth-child(3) {
  color: #f5a6d1;
  display: inline-block;
  animation: swing 3s ease-in-out infinite 0.6s;
}

.logo span:nth-child(4) {
  color: #7c7cb2;
  display: inline-block;
  animation: swing 3s ease-in-out infinite 0.9s;
}

@keyframes bounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-5px);
  }
}

@keyframes swing {
  0%, 100% {
      transform: rotate(0deg);
  }
  25% {
      transform: rotate(10deg);
  }
  75% {
      transform: rotate(-10deg);
  }
}
</style>
